<template>
	<view>
		<view class="where" :style="{'padding-top': statusBarHeight+'px'}">
			<view>
 				<view @click="goBack" class="back">
					<image src="../static/back.png" mode=""></image>
				</view> 
				商城
			</view>
		</view>
		<view class="banner">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="swiper-item">
						<image :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item.pictureId" class="img"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="menuBox">
			<view @click="toClassify(index)" v-for="(item,index) in menuList" :key="index">
				<image :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item.ctImgUrl" class="img"></image>
				<view>
					{{item.ctName}}
				</view>
			</view>
		</view>
		
		
		<view class="shopList">
			<view @click="toInfo(item.id)" v-for="(item,index) in shopList" :key="index">
				<image :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item.prImgUrl" mode="aspectFill" class="img"></image>
				<view>{{item.prName}}</view>
				<view>{{item.prDescription || ""}}</view>
				<view>￥{{item.prRetailPrice}}</view>
				<view @click.stop="addShopCar(item.id)">
					<image src="../static/gouwuche-baise.png" mode=""></image>
				</view>
			</view>
		</view>
		<view v-if="showQuesheng" class="quesheng">
			这个商家很懒，还没有上架商品
		</view>
		
	</view>
</template>

<script>                          
	let that
	export default {
		props:{
			menuList:{
				type:Array,
				defualt:[]
			},
		},
		data() {
			return {
				baseUrl:getApp().globalData.baseUrl,
				statusBarHeight:getApp().globalData.statusBarHeight,
				bannerList:[],
				shopList:[],
				showQuesheng:false
			}
		},
		mounted() {
			that = this 
			that.getBannerList()
			that.getShopList()
		},
		methods: {
			addShopCar(id){
				this.$http('/common/api/shopingCart/add',{
					"productId":id,
					"quantity":1
				},res=>{
					uni.showToast({
						icon:'none',
						title:'加入购物车成功'
					})
				})
			},
			toClassify(index){
				this.$emit('checkClass',index)
			},
			getBannerList(){
				this.$http('/common/api/commonData/getTenantPictureList',{
					"condition":{
					        "typeFlag":1,
					        "tenantId":uni.getStorageSync('tenantId')
					    }
				},res=>{
					this.bannerList = res.data.items
				})
			},
			getShopList(){
				this.$http('/common/api/commonData/getProductList',{
					"condition":{
					        "tenantId":uni.getStorageSync('tenantId'),
							"storageMode":3
					    }
				},res=>{
					if(res.data.items.length>0){
						this.shopList = res.data.items.slice(0,10)
					}else{
						this.showQuesheng = true
					}
					
				})
			},
			toInfo(id){
				uni.navigateTo({
					url:'/pages/shopMall/shopInfo?id='+ id
				})
			},
			goBack(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
			
		}
	}
</script>

<style scoped lang="less">
.where{
	// background-color: #57BF62;
	width: 100%;
	color: #333;
	padding-bottom: 120upx;
	>view{
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		box-sizing: border-box;
		padding-left: 30upx;
		text-align: center;
		position: relative;
		>image{
			width: 25px;
			height: 25px;
			margin-bottom: -7.5px;
			margin-right: 10upx;
		}
	}
}
.banner{
	width: 95%;
	height: 300upx;
	border-radius: 20upx;
	margin: -100upx auto 0 ;
	overflow: hidden;
	
	.swiper{
		width: 100%;
		height: 100%;
		.swiper-item{
			width: 100%;
			height: 100%;
			border-radius: 20upx;
			.img{
				width: 100%;
				height: 100%;
				border-radius: 20upx;
			}
		}
	}
}
.menuBox{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	font-size: 22upx;
	>view{
		width: 20%;
		text-align: center;
		margin-top: 40upx;
		>image{
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			margin-bottom: 10upx;
			background-color: #FFFFFF;
		}
	}
}
.shopList{
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 20upx;
	margin-top: 40upx;
	>view{
		background-color: #FFFFFF;
		overflow: hidden;
		border-radius: 10upx;
		width: 345upx;
		margin-bottom: 20upx;
		position: relative;
		>image:first-child{
			width: 300upx;
			height: 300upx;
			margin: 22.5upx auto;
			display: block;
		}
		>view{
			width: 300upx;
			margin: 0 auto;
		}
		>view:nth-child(2){
			font-size: 28upx;
			height: 80upx;
			line-height: 40upx;
			color: #555555;
		}
		>view:nth-child(3){
			font-size: 20upx;
			height: 60upx;
			line-height: 30upx;
			color: #999999;
		}
		>view:nth-child(4){
			font-size: 32upx;
			height: 60upx;
			line-height: 60upx;
			color: #FF3C3C;
			font-weight: 600;
			margin: 5upx auto 20upx;
		}
		>view:last-child{
			width: 36upx;
			height: 36upx;
			border-radius: 50%;
			position: absolute;
			right: 20upx;
			bottom: 20upx;
			background-color: #5ECC6C;
			padding: 12upx;
			>image{
				width: 36upx;
				height: 36upx;
			}
		}
	}
}
	.back{
		width: 100upx;
		height: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.back image{
		width: 40upx;
		height: 40upx;
		position: absolute;
		bottom: 50%;
		left: 50%;
		margin-bottom: -20upx;
		margin-left: -20upx;
	}
.quesheng{
	width: 100%;
	font-size: 26upx;
	text-align: center;
	color: #999999;
	padding: 50upx 0;
}
</style>